<template>
  <div>
    <!--Modal 添加编辑成员 start-->
    <Modal
      :style="{top: '20px'}"
      :title="formValidate.id?'编辑成员':'添加成员'"
      @on-visible-change="onChangeVisibleModal"
      v-model="isShowAddOrUpdateEmployeeModal"
      width="700"
    >
      <div>
        <!--Form 添加编辑成员表单 start-->
        <Form :label-width="100" :model="formValidate" :rules="ruleValidate" ref="formValidate">
          <Row>
            <Col span="12">
              <FormItem label="姓名" prop="name">
                <Input
                  :maxlength="30"
                  class="form-width"
                  placeholder="请输入姓名"
                  v-model="formValidate.name"
                />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="性别" required>
                <RadioGroup v-model="formValidate.sex">
                  <Radio :label="1">男</Radio>
                  <Radio :label="2">女</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="助记码" prop="mnemonicCode">
                <Input
                  :maxlength="30"
                  class="form-width"
                  placeholder="请输入助记码"
                  v-model="formValidate.mnemonicCode"
                />
              </FormItem>
            </Col>
            
            <Col span="12">
              <FormItem label="邮箱" prop="email">
                <Input
                  :maxlength="30"
                  class="form-width"
                  placeholder="请输入邮箱"
                  v-model="formValidate.email"
                />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="手机号">
                <Input
                  class="form-width"
                  placeholder="请输入手机号"
                  v-model="formValidate.mobilePhone"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="传真号" prop="faxNumber">
                <Input
                  class="form-width"
                  placeholder="请输入传真号"
                  v-model="formValidate.faxNumber"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="座机号" prop="telephone">
                <Input
                  class="form-width"
                  placeholder="请输入"
                  v-model="formValidate.telephone"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="QQ" prop="qqNumber">
                <Input
                  class="form-width"
                  placeholder="请输入"
                  v-model="formValidate.qqNumber"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="微信" prop="wechat">
                <Input
                  class="form-width"
                  placeholder="请输入"
                  v-model="formValidate.wechat"
                ></Input>
              </FormItem>
            </Col>
            
            <Col span="12">
              <FormItem label="备注" prop="remark">
                <Input
                  class="form-width"
                  placeholder="请输入"
                  v-model="formValidate.remark"
                />
              </FormItem>
            </Col>
          </Row>
        </Form>
        <!--Form 添加编辑成员表单 end-->
      </div>
      <div slot="footer">
        <Button @click="isShowAddOrUpdateEmployeeModal=false" type="text">取消</Button>
        <Button :loading="isShowLoading" @click="submitFormData" class="newBtn" type="primary">提交</Button>
      </div>
    </Modal>
    <!--Modal 添加编辑成员 end-->
  </div>
</template>
<script>
import $ from 'jquery';
import { contactApi } from '@/api/contact';
import { dateFormat, utils } from '@/lib/util';
export default {
  name: 'ContactTableAdd',
  components: {
  },
  props: {
  },
  data() {
    return {
      isShowAddOrUpdateEmployeeModal: false,
      isShowLoading: false,
      formValidateBackup: {
        name: '',
        sex: 0,
        mnemonicCode: '',
        email: '',
        mobilePhone: '',
        faxNumber: '',
        telephone: '',
        qqNumber: '',
        wechat: '',
        remark: ''
      },
      formValidate: {
        name: '',
        sex: 0,
        mnemonicCode: '',
        email: '',
        mobilePhone: '',
        faxNumber: '',
        telephone: '',
        qqNumber: '',
        wechat: '',
        remark: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        mobilePhone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^(13|14|15|16|17|18)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {},
  watch: {
    // isShowAddOrUpdateEmployeeModal(val) {
      
    // }
  },
  filters: {},
  created() {},
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    // 弹窗显示隐藏监听
    onChangeVisibleModal(value) {
      if (!value) {
        this.formValidate = Object.assign({}, this.formValidateBackup);
        console.log(this.formValidate);
      }
    },
    // 打开Modal
    showModal(row) {
      this.$refs['formValidate'].resetFields();
      if (row && Object.keys(row).length > 0) {
        this.formValidate = Object.assign({}, row);
      }
      this.isShowAddOrUpdateEmployeeModal = true;
    },
    // 点击提交
    submitFormData() {
      this.$refs['formValidate'].validate(valid => {
        // if (
        //   !/^[A-Za-z]+[A-Za-z0-9]{5,17}$/.test(this.formValidate.loginName) &&
        //   !this.formValidate.id
        // ) {
        //   this.$Message.error('登录名格式不正确！');
        //   return;
        // }
        // if (this.formValidate.idCard) {
        //   if (
        //     !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(
        //       this.formValidate.idCard
        //     )
        //   ) {
        //     this.$Message.error('身份证号码格式不正确！');
        //     return;
        //   }
        // }
        // const reg = new RegExp(
        //   "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
        // );
        // if (reg.test(this.formValidate.actualName)) {
        //   this.$Message.error('姓名中不能含有特殊字符！');
        //   return false;
        // }
        // if (this.formValidate.passwordAgain !== this.formValidate.loginPwd) {
        //   this.$Message.error('两次输入密码不一致，请重新输入！！');
        //   return;
        // }
        if (valid) {
          if (this.formValidate.id) {
            this.update(this.formValidate);
          } else {
            this.add(this.formValidate);
          }
        }
      });
    },
    // 修改成员
    async update(data) {
      try {
        this.isShowLoading = true;
        let result = await contactApi.updateContact(data);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success('修改成功');
        this.$emit('addSuccess');
        this.$refs['formValidate'].resetFields();
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    },
    // 添加新用户接口
    async add(param) {
      try {
        this.isShowLoading = true;
        let result = await contactApi.addContact(param);
        this.isShowAddOrUpdateEmployeeModal = false;
        this.$Message.success('添加成功');
        this.$emit('addSuccess');
        this.$refs['formValidate'].resetFields();
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.form-width {
  width: 100%;
}
.department-wrap {
  position: absolute;
  background-color: #ffffff;
  padding: 5px;
  border: 1px solid #dedede;
  width: 300px;
  z-index: 9;
  height: 250px;
  overflow-y: scroll;
}
.select-class {
  position: relative;
}
</style>
